import React, { useState } from 'react';
import type { DatePickerProps } from 'antd';
import { DatePicker, Space, Input } from 'antd';
import { TreeSelect, Tree, Radio } from 'antd';
const onChange: DatePickerProps['onChange'] = (date, dateString) => {
  console.log(date, dateString);
};
import './index.less';
export default function index() {
  const [value, setValue] = useState('');
  const { TextArea } = Input;

  const onChange1 = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
    console.log('Change:', e.target.value);
  };

  const treeData = [
    {
      title: '泛普ERP在线试用',
      key: '0-0',
      children: [
        {
          title: '总经办',
          key: '0-0-0',
          children: [
            { title: '综合管理部', key: '0-0-0-0' },
            { title: '投资发展部', key: '0-0-0-1' },
            { title: '人事行政部', key: '0-0-0-2' },
            { title: '财务部', key: '0-0-0-3' },
            { title: '企管部', key: '0-0-0-4' },
            { title: '研发部', key: '0-0-0-5' },
            {
              title: '经营部',
              key: '0-0-0-6',
              children: [
                { title: '市场部', key: '0-0-0-6-0' },
                { title: '销售部', key: '0-0-0-6-1' },
                { title: '渠道部', key: '0-0-0-6-2' },
                { title: '运维部', key: '0-0-0-6-3' },
                { title: '大客户部', key: '0-0-0-6-4' },
              ],
            },
            { title: '商务部', key: '0-0-0-7' },
            { title: '采购部', key: '0-0-0-8' },
            {
              title: '生产部',
              key: '0-0-0-9',
              children: [
                { title: '装配部', key: '0-0-0-9-0' },
                { title: '储运部', key: '0-0-0-9-1' },
                { title: '生产一部', key: '0-0-0-9-2' },
                { title: '生产二部', key: '0-0-0-9-3' },
              ],
            },
            { title: '质量部', key: '0-0-0-10' },
            { title: '工装部', key: '0-0-0-11' },
            { title: '审计部', key: '0-0-0-12' },
            { title: '信息部', key: '0-0-0-13' },
          ],
        },
        {
          title: '账号',
          key: '0-0-1',
        },
      ],
    },
  ];
  return (
    <div className="entrust">
      <div className="entrust_header">
        <button>保存</button>
        <button>删除</button>
      </div>
      <div className="entrust_control">
        <div className="entrust_control_left">
          <Tree
            showLine={true}
            defaultExpandedKeys={['0-0-0', '0-0-0-3', '0-0-0-6', '0-0-0-9']}
            treeData={treeData}
            style={{ marginLeft: '20px' }}
          />
        </div>

        <div className="entrust_control_right">
          <ul>
            <li>
              <label htmlFor="">开始日期：</label>
              <DatePicker style={{ width: '70%' }} onChange={onChange} />
            </li>
            <li>
              <label htmlFor="">结束日期：</label>
              <DatePicker style={{ width: '70%' }} onChange={onChange} />
            </li>
            <li>
              <label htmlFor="">委托给谁：</label>
              <Input style={{ width: '70%' }} placeholder="Basic usage" />
            </li>
            <li>
              <label htmlFor="">委托原因：</label>
              <TextArea
                style={{ width: '70%', verticalAlign: 'top' }}
                value={value}
                onChange={(e) => setValue(e.target.value)}
                placeholder=""
                autoSize={{ minRows: 3, maxRows: 5 }}
              />
            </li>
          </ul>

          <div className="entrust_control_right_table">
            <table>
              <thead>
                <tr>
                  <div
                    style={{
                      width: '20px',
                      height: '20px',
                      borderRadius: '50%',
                      border: '1px solid #7aafd9',
                      margin: '0 auto',
                      marginTop: '15%',
                    }}
                  ></div>
                </tr>
                <tr>流程名称</tr>
                <tr>开始日期</tr>
                <tr>结束日期</tr>
                <tr>委托时间</tr>
                <tr>委托到</tr>
                <tr>委托原因</tr>
              </thead>
              <tbody></tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  );
}
